<script setup lang="ts">
import {videoImagesDir} from '@/utils/config.ts'
import TextInfo from '@/components/text-info.vue'
import {DreamVideo, Movie} from '@/data/Dream'

defineProps<{
  movie: Movie
  video: DreamVideo
}>()

const containerWidth = 531
const bigImageHeight = Math.ceil(containerWidth * 9 / 16)
const smallImageWidth = (containerWidth - 1) / 2
const smallImageHeight = Math.ceil(smallImageWidth * 9 / 16)
</script>

<template>
  <a-image-preview-group>
    <div class="video-cover">
      <a-image :width="containerWidth"
               :height="bigImageHeight"
               :src="videoImagesDir + video.images[0]"
      />
    </div>
    <div class="video-images">
      <div v-for="img in video.images.slice(1)" :key="img">
        <a-image :width="smallImageWidth"
                 :height="smallImageHeight"
                 :src="videoImagesDir + img"/>
      </div>
    </div>
  </a-image-preview-group>

  <text-info :movieProps="movie"
             :video="video"
  />
</template>

<style scoped lang="stylus">
.video-cover
  margin-bottom: 1px;

.video-images
  display: flex;
  justify-content: space-between;
</style>